.select2-container,
.select2-container.select2-drop-above {
  .select2-choice, .select2-choices {
    border: $input-btn-border-width solid $input-border-color;
    border-radius: $input-border-radius;
    background: $input-bg;
    height: $input-height;
    padding: 0;

    .select2-arrow {
      background: transparent;
      border-left: 0;
      b {
        // Need to be !important to override media query select2 defaults
        // Inline icon taken from bootstrap's custom-select class
        background: transparent url() no-repeat right .75rem center !important;
        background-size: 8px 10px !important;
      }
    }

    >.select2-chosen {
      padding: $input-btn-padding-y $input-btn-padding-x;
      line-height: $input-btn-line-height;
      color: $input-color;
    }
  }
}

.select2-container.select2-dropdown-open {
  .select2-choice,
  .select2-choices {
    border-radius: $input-border-radius $input-border-radius 0 0;
  }

  &.select2-drop-above {
    .select2-choice,
    .select2-choices {
      border-radius: 0 0 $input-border-radius $input-border-radius;
    }
  }
}

.select2-container .select2-choice .select2-search-choice-close {
  @extend .fa;
  @extend .fa-times;
  color: #333; /* matches bootstrap's custom-select arrow */

  /* See https://github.com/solidusio/solidus/pull/1314 */
  display: none;

  /* Hide the default icon */
  background-image: none;
}

.select2-container-active, .select2-dropdown-open,
.select2-container-active.select2-drop-above,
.select2-dropdown-open.select2-drop-above {
  .select2-choices.select2-choices, /* Needs extra specificity */
  .select2-choice {
    box-shadow: none; /* Remove default outline */
    border-color: $input-focus-border-color;
  }
}

.select2-container-multi .select2-choices {
  .select2-search-choice, .select2-search-field {
    line-height: 1.35; /* Fill height of input */
  }

  .select2-search-choice {
    background: $gray-200;
    border: 0;
    margin: 2px 0 3px 5px; // adjust the margin to respect the adjusted line height
  }
}

.select2-container-multi .select2-search-choice-close {
  height: 12px; // fix the height to fit the actual content
  /* Making the vertical position always respect the height of parent */
  top: 50%;
  transform: translateY(-50%);
}

.select2-search input {
  background: white;
}

.select2-drop {
  /* Remove default shadow */
  box-shadow: none;

  &.select2-drop-active,
  &.select2-drop-active.select2-drop-above {
    border: $input-btn-border-width solid $input-focus-border-color;
  }

  &.select2-drop-active {
    border-top: 0;

    &.select2-drop-above {
      border-bottom: 0;
    }
  }
}

.select2-results {
  .select2-no-results, .select2-searching {
    /* Remove light grey background */
    background: transparent;
    line-height: 2.5;
  }

  .select2-highlighted {
    background-color: $dropdown-link-hover-bg;

    // Ensure all remote results have correct colors on hover
    * { color: $dropdown-link-hover-color }
  }
}
